import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)
// 默认 recursive 递归的 , 改成false就没有这个
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

/* ★批量导入并注册 .svg文件 步骤:
    1. req= require.context(目录,是否检索子目录,正则)  这个API返回的是一个函数
    2. 调用这个函数内部的方法 keys() 返回包含所有模块名的数组  [0: "./404.svg" ,...]
    3. req这个API 生成了一个类require方法, 调用 req(文件名), 返回对应的模块,
        所以配合第2步,  对这个数组进行循环 map(i=>req(i)) === map(req)

    // 注意: map()的性能不好, 可以使用forEach()    (还可以创建一个空对象保存,就可以在其他文件中导入)
    // webpack官方写法
    // function importAll(req) {
    //   req.keys().forEach(req)
    // }
    // importAll(require.context('./svg', false, /\.svg$/))
*/

/* ★ .keys() 源码
    webpackContext.keys = function webpackContextKeys() {
    return Object.keys(map);
*/
// ★*********************************************************************************
//  此处require.context()方法生成了一个类require方法，这个方法接收一个参数req，根据这个参数我们可以得到相应的模块信息。 比如传入svg目录下的404.svg文件名，req('./404.svg')，就会返回相对应的模块。
//  所以使用 req.keys().map(i=>req(i))
// console.dir(req('./404.svg')) // Module:{}
// // ★*********************************************************************************

// console.dir(require) // webpackEmptyContext(req)
// console.dir(req) // webpackContext(req)
// console.dir(req.keys()) // 数组 [0: "./404.svg" ,...]

// console.dir(req.keys().map(req))
// console.dir(req.keys().map(i => req(i)))
// console.dir(req.keys().map(i => req(i))[0].default)
// map(req) == map(i=>req(i))
// 数组 0: Module {default: BrowserSpriteSymbol, __esModule: true, Symbol(Symbol.toStringTag): 'Module' ,...}

/* 通过打印, 可以看出返回的是一个函数，意思就是说，require.context模块导出（返回）一个（require）函数。
    这个函数有三个属性：

       1. resolve：是一个函数，它返回请求被解析后得到的模块 id。
       2. keys：也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。
       3. id：是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

    */

/*
    require.context是webpack中，用来创建自己的（模块）上下文

    webpack会在构建的时候解析代码中的require.context()

    require.context(directory,useSubdirectories,regExp)

    directory:表示检索的目录
    useSubdirectories：表示是否检索子文件夹
    regExp:匹配文件的正则表达式,一般是文件名
    mode: sync
    例如 require.context("@/views/components",false,/.vue$/)
 */
